<template>
  <div class="login-page">
    <div class="login-left">
      <div class="brand-logo">
        <img src="https://cdn-icons-png.flaticon.com/512/1046/1046857.png" alt="logo" />
        <span>酒店预订</span>
      </div>
      <div class="welcome-title">欢迎注册酒店预订平台</div>
      <div class="welcome-desc">
        体验高端酒店预订服务，享受专属优惠与个性化推荐。加入我们，开启您的尊贵旅程。
      </div>
      <ul class="features">
        <li>
          <i class="el-icon-discount"></i>
          <div>
            <span class="feature-title">专属优惠</span>
            <span class="feature-desc">会员享受专属价格与促销活动</span>
          </div>
        </li>
        <li>
          <i class="el-icon-lock"></i>
          <div>
            <span class="feature-title">安全预订</span>
            <span class="feature-desc">数据加密，保障您的信息安全</span>
          </div>
        </li>
        <li>
          <i class="el-icon-service"></i>
          <div>
            <span class="feature-title">24小时客服</span>
            <span class="feature-desc">我们的团队随时为您服务</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="login-right">
      <el-card class="login-card">
        <div class="register-title">注册</div>
        <el-form :model="form" :rules="rules" ref="registerForm" label-width="0">
          <el-form-item prop="username">
            <el-input v-model="form.username" placeholder="请输入用户名" prefix-icon="el-icon-user" size="large" />
          </el-form-item>
          <el-form-item prop="email" :rules="[{ required: true, message: '请输入邮箱', trigger: 'blur' }, { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }]">
            <el-row :gutter="8">
              <el-col :span="16">
                <el-input v-model="form.email" placeholder="请输入邮箱" prefix-icon="el-icon-message" size="large" />
              </el-col>
              <el-col :span="8">
                <el-button :disabled="countdown > 0" size="large" style="width:100%" @click="onSendCode">
                  {{ countdown > 0 ? `${countdown}s后重试` : '获取验证码' }}
                </el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item prop="code" :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]">
            <el-input v-model="form.code" placeholder="请输入验证码" size="large" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="form.password" type="password" placeholder="请输入密码" prefix-icon="el-icon-lock" size="large" />
          </el-form-item>
          <el-form-item prop="confirm">
            <el-input v-model="form.confirm" type="password" placeholder="请确认密码" prefix-icon="el-icon-lock" size="large" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="large" style="width:100%" @click="onRegister">注册</el-button>
          </el-form-item>
          <el-form-item>
            <span>已有账号？<router-link to="/login">登录</router-link></span>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { apiRegister, apiSendCode } from '@/api/api.ts'

const router = useRouter()
const form = ref({ username: '', email: '', code: '', password: '', confirm: '' })
const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }, { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }],
  code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  confirm: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    { validator: (rule: any, value: string, callback: any) => {
        if (value !== form.value.password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      }, trigger: 'blur' }
  ]
}
const registerForm = ref()
const countdown = ref(0)
let timer: any = null

const onSendCode = () => {
  registerForm.value.validateField('email', (valid: boolean) => {
    if (valid) {
      apiSendCode(form.value.email)
        .then((res: any) => {
          if (res.data.code === 200) {
            ElMessage.success('验证码已发送，请查收邮箱！')
            countdown.value = 60
            timer = setInterval(() => {
              countdown.value--
              if (countdown.value <= 0) clearInterval(timer)
            }, 1000)
          } else {
            ElMessage.error(res.data.msg || '验证码发送失败')
          }
        })
        .catch(err => {
          ElMessage.error(err?.response?.data?.message || '验证码发送失败')
        })
    }
  })
}

const onRegister = () => {
  registerForm.value.validate((valid: boolean) => {
    if (valid) {
      apiRegister({
        username: form.value.username,
        email: form.value.email,
        password: form.value.password,
        code: form.value.code
      })
        .then((res: any) => {
          if (res.data.code === 200) {
            ElMessage.success('注册成功！')
            router.push('/login')
            form.value.email = ''
            form.value.code = ''
            countdown.value = 0
            if (timer) clearInterval(timer)
          } else {
            ElMessage.error(res.data.msg || '注册失败')
          }
        })
        .catch(err => {
          ElMessage.error(err?.response?.data?.message || '注册失败')
        })
    }
  })
}
</script>

<style scoped>
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f8fb;
}
.login-left {
  flex: 1.2;
  background: linear-gradient(135deg, #3a8dde 60%, #1976d2 100%);
  color: #fff;
  border-radius: 32px 0 0 32px;
  min-width: 340px;
  max-width: 500px;
  padding: 48px 36px 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 4px 32px rgba(58,141,222,0.08);
}
.brand-logo {
  display: flex;
  align-items: center;
  font-size: 2.4rem;
  font-weight: bold;
  margin-bottom: 36px;
  letter-spacing: 2px;
}
.brand-logo img {
  width: 48px;
  height: 48px;
  margin-right: 16px;
}
.welcome-title {
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 18px;
  letter-spacing: 1px;
}
.welcome-desc {
  font-size: 1.1rem;
  margin-bottom: 32px;
  line-height: 1.7;
  color: #e3f0fa;
}
.features {
  list-style: none;
  padding: 0;
  margin: 0;
}
.features li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 22px;
}
.features i {
  font-size: 1.7rem;
  margin-right: 16px;
  color: #fff;
  opacity: 0.92;
}
.feature-title {
  font-weight: bold;
  font-size: 1.13rem;
  margin-bottom: 2px;
  display: block;
}
.feature-desc {
  font-size: 1rem;
  opacity: 0.92;
}
.login-right {
  flex: 1.6;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 0 32px 32px 0;
  min-width: 340px;
  padding: 48px 32px;
  box-shadow: 0 4px 32px rgba(58,141,222,0.04);
}
.login-card {
  width: 400px;
  border-radius: 20px;
  box-shadow: none;
  border: none;
  padding: 0 0 8px 0;
  font-size: 1.18rem;
}
.register-title {
  text-align: center;
  font-size: 2.1rem;
  font-weight: bold;
  margin-bottom: 18px;
  color: #1976d2;
  letter-spacing: 2px;
}
.el-form-item, .el-form-item__label, .el-input__inner, .el-checkbox__label {
  font-size: 1.15rem !important;
}
.el-input__wrapper,
.el-input__inner {
  font-size: 1.15rem !important;
  border-radius: 12px !important;
}
.el-button--primary {
  border-radius: 12px;
  font-size: 1.22rem;
  height: 48px;
}
@media (max-width: 900px) {
  .login-page {
    flex-direction: column;
    padding: 0;
  }
  .login-left, .login-right {
    border-radius: 0;
    min-width: 100vw;
    max-width: 100vw;
    padding: 32px 12px;
  }
  .login-card {
    width: 100%;
    min-width: 0;
  }
}
@media (max-width: 600px) {
  .login-left, .login-right {
    padding: 14px 2px;
  }
  .brand-logo {
    font-size: 1.2rem;
  }
  .welcome-title {
    font-size: 1.2rem;
  }
  .login-card {
    width: 100vw;
    min-width: 0;
  }
}
</style> 